<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>用户订单管理管理</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).ready(function () {
                $("#btnExport").click(function () {
                    top.$.jBox.confirm("确认要导出用户订单数据吗？", "系统提示", function (v, h, f) {
                        if (v == "ok") {
                            $("#searchForm").attr("action", "${ctx}/shop/order/hkShopUserOrder/export");
                            $("#searchForm").submit();
                        }
                    }, {buttonsFocus: 1});
                    top.$('.jbox-body .jbox-icon').css('top', '55px');
                });
                $("#btnImport").click(function () {
                    $.jBox($("#importBox").html(), {
                        title: "导入数据", buttons: {"关闭": true},
                        bottomText: "导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！"
                    });
                });
            });
        });

        function page(n, s) {
            $("#pageNo").val(n);
            $("#pageSize").val(s);
            $("#searchForm").submit();
            return false;
        }
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/shop/order/hkShopUserOrder/">用户订单管理列表</a></li>
    <%--
            <shiro:hasPermission name="shop:order:hkShopUserOrder:edit"><li><a href="${ctx}/shop/order/hkShopUserOrder/form">用户订单管理添加</a></li></shiro:hasPermission>
    --%>
</ul>
<form:form id="searchForm" modelAttribute="hkShopUserOrder" action="${ctx}/shop/order/hkShopUserOrder/" method="post"
           class="breadcrumb form-search">
    <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
    <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
    <sys:tableSort id="orderBy" name="orderBy" value="${page.orderBy}" callback="page();"/>
    <ul class="ul-form">
        <li><label>订单号：</label>
            <form:input path="ordernumber" htmlEscape="false" maxlength="20" class="input-medium"/>
        </li>
        <li><label>订单状态：</label>
            <form:select path="state" class="input-medium">
                <form:option value="" label=""/>
                <form:options items="${fns:getDictList('hk_shop_order_state')}" itemLabel="label" itemValue="value"
                              htmlEscape="false"/>
            </form:select>
        </li>
        <li><label>成交时间：</label>
            <input name="confirmdate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
                   value="<fmt:formatDate value="${hkShopUserOrder.confirmdate}" pattern="yyyy-MM-dd"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
        </li>
        <li><label>下单时间：</label>
            <input name="beginCreateDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
                   value="<fmt:formatDate value="${hkShopUserOrder.beginCreateDate}" pattern="yyyy-MM-dd"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/> -
            <input name="endCreateDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
                   value="<fmt:formatDate value="${hkShopUserOrder.endCreateDate}" pattern="yyyy-MM-dd"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
        </li>
        <li><label>收货人：</label>
            <form:input path="consignee" htmlEscape="false" maxlength="100" class="input-medium"/>
        </li>
        <li><label>手机号：</label>
            <form:input path="phone" htmlEscape="false" maxlength="20" class="input-medium"/>
        </li>
        <li><label>快递公司：</label>
            <form:input path="courier" htmlEscape="false" maxlength="50" class="input-medium"/>
        </li>
        <li><label>快递单号：</label>
            <form:input path="couriernumber" htmlEscape="false" maxlength="50" class="input-medium"/>
        </li>
        <li class="btns">
            <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
            <input id="btnExport" class="btn btn-primary" type="button" value="导出"/>
        </li>
        <li class="clearfix"></li>
    </ul>
</form:form>
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>订单号</th>
        <th>金额</th>
        <th>支付类型</th>
        <th>订单状态</th>
        <th>用户</th>
        <th>收货人</th>
        <th>手机号</th>
        <th>地址</th>
        <th>快递</th>
        <th class="sort-column createDate">下单时间</th>
        <th class="sort-column delivertime">发货时间</th>
        <th class="sort-column confirmdate">成交时间</th>
        <th>售后状态</th>
        <th>备注</th>
        <shiro:hasPermission name="shop:order:hkShopUserOrder:edit">
            <th>操作</th>
        </shiro:hasPermission>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${page.list}" var="hkShopUserOrder">
        <tr>
            <td><a href="${ctx}/shop/order/hkShopUserOrder/form?id=${hkShopUserOrder.id}">
                    ${hkShopUserOrder.ordernumber}
            </a></td>
            <td>
                    ${hkShopUserOrder.integral}
            </td>
            <td>
                    ${hkShopUserOrder.paytype}
            </td>
            <td>
                    ${fns:getDictLabel(hkShopUserOrder.state, 'hk_shop_order_state', '')}
            </td>
            <td>
                    ${hkShopUserOrder.user.name}
            </td>
            <td>
                    ${hkShopUserOrder.consignee}
            </td>
            <td>
                    ${hkShopUserOrder.phone}
            </td>
            <td>
                    ${hkShopUserOrder.address}
            </td>
            <td>
                    ${hkShopUserOrder.courier}--${hkShopUserOrder.couriernumber}
            </td>
            <td>
                <fmt:formatDate value="${hkShopUserOrder.createDate}" pattern="yyyy-MM-dd"/>
            </td>
            <td>
                <fmt:formatDate value="${hkShopUserOrder.delivertime}" pattern="yyyy-MM-dd"/>
            </td>
            <td>
                <fmt:formatDate value="${hkShopUserOrder.confirmdate}" pattern="yyyy-MM-dd"/>
            </td>
            <td>
                    ${fns:getDictLabel(hkShopUserOrder.afterstate, 'hk_shop_order_afterState', '')}
            </td>
            <td>
                    ${hkShopUserOrder.remarks}
            </td>
            <shiro:hasPermission name="shop:order:hkShopUserOrder:edit">
                <td>
                    <a href="${ctx}/shop/order/hkShopUserOrder/form?id=${hkShopUserOrder.id}">查看</a>
                    <c:if test="${not empty hkShopUserOrder.afterstate}">
                        <a href="${ctx}/shop/order/hkShopUserOrderAfter/list?ordernumber=${hkShopUserOrder.ordernumber}">售后</a>
                    </c:if>
                    <c:if test='${"3" eq hkShopUserOrder.state}'>
                        <a id="state3" href="javascript:"
                           onclick="showLogistics('${hkShopUserOrder.ordernumber}')" style="color: red;">发货</a>
                    </c:if>
                    <c:if test='${"4" eq hkShopUserOrder.state || "5" eq hkShopUserOrder.state || "7" eq hkShopUserOrder.state}'>
                        <a href="javascript:"
                           onclick="showExpress('${hkShopUserOrder.ordernumber}','${hkShopUserOrder.courier}')"
                           style="color: #8DBE5A;">物流</a>
                    </c:if>
                    <c:if test='${"1" eq hkShopUserOrder.state}'>
                        <a href="${ctx}/shop/order/hkShopUserOrder/form?id=${hkShopUserOrder.id}" style="color: #8E44AD;">编辑</a>
                    </c:if>
                    <c:if test='${"10" eq hkShopUserOrder.state}'>
                        <a href="${ctx}/shop/order/hkShopUserOrder/delete?id=${hkShopUserOrder.id}"
                           onclick="return confirmx('确认要删除该用户订单管理吗？', this.href)" style="color: #6A7991;">删除</a>
                    </c:if>
                </td>
            </shiro:hasPermission>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div id="logistics"
     style="display: none;margin-left: 5%; width: 90%; background-color: #F2F2F2; height: 200px; position:fixed;
            bottom: 40%; line-height: 0; z-index: 150;">
    <div style="height:40px;">
        <label style="font-size:16px; font-weight: bold; padding-top: 7px; padding-left: 40%;">填写物流信息</label>
    </div>

    <div style="height: 150px;">
        <table class="table table-bordered" border="1" style="text-align: center;height: 150px;">
            <thead>
            <tr>
                <th>配送方式</th>
                <th>物流公司名称</th>
                <th>物流状态</th>
                <th>运单号</th>
                <th>发货时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <td>
                    <input type="text" id="inputInfo" value="快递" readonly="true">
                </td>
                <td>
                    <div style="height: auto;">
                        <select style="width: 100px;" class="selectpicker form-control" data-live-search="true"
                                name="express" id="express">
                            <option value='1' selected='selected'>请选择</option>
                        </select>
                    </div>
                </td>
                <td>
                    待发货
                </td>
                <td>
                    <input type="text" id="waybillNum" value="">
                </td>
                <td>
                    <input name="confirmdate" id="deliverTime" type="text" readonly="readonly" maxlength="20"
                           class="input-medium Wdate"
                           onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
                </td>
                <td>
                    <button id="deliver" class="btn btn-primary">立即发货</button>
                    <button id="closeBtn" class="btn btn-warning">关闭</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="expressMsg"
     style="display: none;margin-left: 5%; width: 90%; background-color: #F2F2F2;top:5%; position:fixed; line-height: 0; z-index: 150;">
    <div style="height:40px;">
        <label style="font-size:16px; font-weight: bold; padding-top: 7px; padding-left: 40%;">订单跟踪</label>
    </div>
    <div>
        <ul id="expressMsgUl">

        </ul>
    </div>
    <div>
        <button id="closeBtnExp" class="btn btn-default" style="margin-left: 80%;padding-bottom: 5px;">关闭
        </button>
    </div>
</div>

<div class="pagination">${page}</div>
<script type="text/javascript">

    var orderNum = "";
    //提交物流信息
    $("#deliver").click(function () {
        var flag = true;
        if ($("#express").val() == "请选择" || $("#express").val() == null || $("#express").val() == "" || $("#waybillNum").val() == null || $("#waybillNum").val() == "" || $("#deliverTime").val() == null || $("#deliverTime").val() == "") {
            flag = false;
            alert("请完整填写物流信息");
        }

        if (flag) {
            //提交物流信息
            $.ajax({
                type: "POST",
                url: "${ctx}/shop/order/hkShopUserOrder/logistics",
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                data: {
                    orderNum: orderNum,
                    company: $("#express").val(),
                    waybillNum: $("#waybillNum").val(),
                    deliverTime: $("#deliverTime").val()
                },
                success: function (res) {
                    window.location.reload();
                    $("#logistics").hide();
                },
                error: function (res) {
                    alert("物流信息提交失败，请稍后重试。");
                }
            });
        }
    });


    //显示物流信息
    function showLogistics(orderNumber) {
        orderNum = orderNumber;
        $("#express").empty();
        $.ajax({
            type: "GET",
            url: "${ctx}/shop/order/hkShopUserOrder/getExpressCompay",
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            dataType: 'json',
            success: function (res) {
                $.each(res, function (n, value) {
                    $("#express").append(
                        "<option value='" + value.abbreviation + "'>" + value.name + "</option>"
                    )
                });
                $("#logistics").show();
            },
            error: function (res) {

            }
        });
    }

    //隐藏物流信息
    $("#closeBtn").click(function () {
        $("#logistics").hide();
    });

    //隐藏快递信息
    $("#closeBtnExp").click(function () {
        $("#expressMsg ul").empty();
        $("#expressMsg").hide();
    });


    //查看快递信息
    function showExpress(orderNumber, express) {
        $.ajax({
            type: "GET",
            url: "${ctx}/shop/order/hkShopUserOrder/getExpress",
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            data: {
                orderNumber: orderNumber,
                express: express
            },
            success: function (res) {
                var json = JSON.parse(res);
                if (json.state != "3") {
                    $("#expressMsg").attr("height:150px");
                    $("#expressMsgUl").append("<li style='margin-bottom: 15px;'>" + json.message + "</li>");
                } else {
                    $("#expressMsg").attr("height:600px");
                    var data = json.data;
                    $.each(data, function (n, item) {
                        $("#expressMsgUl").append("<li style='margin-bottom: 5px;'>" + item.context + "<br>" + item.time + "</li>");
                    });
                }
                $("#expressMsg").show();
            },
            error: function (res) {
                alert("获取物流信息失败，请稍后重新获取！")
            }
        });
    }
</script>


</body>
</html>